<template>
  <div>
      <div class="form-container">
        <v-form-title title="关联对公账户"></v-form-title>
        <el-form :model="form" ref="form" label-width="200px" label-position="right" :rules="rules">

          <el-form-item prop="cnapsCode" label="银行行号">
            <el-input class="line-input" maxlength="12" v-model="form.cnapsCode" v-if="this.userInfo.certificationStatus < 3"
                      placeholder="请输入银行行号"></el-input>
            <span v-if="this.userInfo.certificationStatus >= 3">{{account.cnapsCode}}</span>
          </el-form-item>
          <el-form-item prop="bankBranchName" label="开户银行">
            <span v-if="this.userInfo.certificationStatus < 3">{{form.bankBranchName}}</span>
            <span v-if="this.userInfo.certificationStatus >= 3">{{account.bankName}}</span>
          </el-form-item>
          <el-form-item prop="accountNumber" label="银行账号">
            <el-input class="line-input" v-model="form.accountNumber" placeholder="请输入银行账号" v-if="this.userInfo.certificationStatus < 3"></el-input>
            <span v-if="this.userInfo.certificationStatus >= 3">{{account.accountNumber}}</span>
          </el-form-item>
        </el-form>
      </div>

    <div class="operation" v-if="this.userInfo.certificationStatus < 3">
      <el-button type="primary" @click="valid" disabled v-if="this.accountStatus === 1">提交</el-button>
      <el-button type="primary" @click="valid" v-if="this.accountStatus !== 1">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

  import vFormTitle from '@/components/form-title'
  import { Action, Getter } from 'vuex-class'

  @Component({
    components: {
      vFormTitle
    }

  })
  export default class Step1 extends Vue {
    @Action getPolicy
    // @Prop() userInfo
    @Getter userInfo

    account = {}

    async post (f) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/account', f)
      this.$utils.tips(res)
      this.getAccount()
    }
    form = {
      bankBranchName: '',
      bankNumber: '',
      userId: '',
      accountNumber: '',
      cnapsCode: ''
    }
    tempAccountForm = {}
    accountStatus = ''
    rules = {
      accountNumber: [
        {required: true, message: '请输入银行账号', trigger: 'change'}
      ],
      cnapsCode: [
        {required: true, message: '请输入银行行号', trigger: 'change'},
        {len: 12, message: '请输入12位银行行号', trigger: 'change'},
        {validator: this.testBankNumber, trigger: 'blur'}
      ]
    }
    async testBankNumber (rules, v, cb) {
      if (v.length < 12) return
      let res: AjaxResponse = await this.$axios.get(`g/gateway/bank/${v}`)
      if (res.data === null) {
        this.form.bankBranchName = ''
        cb('您输入的行号有误,请重新输入')
      } else {
        this.form.bankBranchName = res.data.bankBranchName
        this.form.cnapsCode = res.data.cnapsCode
        this.form.bankNumber = res.data.bankNo
        cb()
      }
    }

    valid () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.post(this.form)
      })
    }

    // 查询银行信息
    async getAccount () {
      let accountInfo: AjaxResponse = await this.$axios.get(`g/gateway/account/user/${this.userInfo.userId}`)
      this.account = accountInfo.data[0]
      if(accountInfo.data[0] !== undefined) {
        this.tempAccountForm = accountInfo.data[0]
        this.form.bankBranchName = this.tempAccountForm.bankName
        this.platForms()
      }
    }
    platForms () {
      for (let key in this.tempAccountForm) {
          if (this.tempAccountForm.hasOwnProperty(key)) {
              this.form[key] = this.tempAccountForm[key]
          }
      }
    }
    mounted () {
      this.getPolicy()
      this.getAccount()
      if(window.localStorage.getItem('invite') != null){
        this.form.userId = JSON.parse(window.localStorage.getItem('invite')).enterpriseUserId
      }else{
        this.form.userId = this.userInfo.userId
      }
      if(window.sessionStorage.getItem('certicaDetail') != null) {
        this.accountStatus = JSON.parse(window.sessionStorage.getItem('certicaDetail')).publicAccountStatus
      }
    }
  }
</script>
<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    .el-button {
      margin: 30px 0;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }
</style>
